import {
  ContainerOutlined,
  DesktopOutlined,
  FolderAddOutlined,
} from '@ant-design/icons';
import {
  Button,
  Input,
  InputNumber,
  Menu,
  MenuProps,
  Select,
  Space,
} from 'antd';
import React, { useEffect, useState } from 'react';

import styles from './index.less';
const SceneModal = (props) => {
  // 在这里可以访问传递的数据

  type ObsSettingType = {
    Video: { Output: any; FPSCommon: any; Base: any };
    Output: {
      RecFilePath: any;
      Encoder: any;
      RecFormat: any;
      bitrate: any;
      Track1Bitrate: any;
    };
  };
  const [checkMenuData, setCheckMenuData] = useState('1');
  const [obsSetting, setObsSetting] = useState<ObsSettingType>({
    Output: {
      bitrate: 2500,
      Track1Bitrate: '160',
      Encoder: 'Software(x264)',
      RecFilePath: '',
      RecFormat: 'mp4',
    },
    Video: {
      Base: '2560x1440',
      Output: '2560x1440',
      FPSCommon: 30,
    },
  });
  // {label:string,value:any}[]
  const [obsOption, setObsOption] = useState<ObsSettingType>({
    Output: {
      bitrate: [],
      Track1Bitrate: [],
      Encoder: [],
      RecFilePath: [],
      RecFormat: [],
    },
    Video: {
      Base: [],
      Output: [],
      FPSCommon: [],
    },
  });
  useEffect(() => {
    async function init() {
      const data: Map<string, any> = await window.tm?.ipcRenderer.invoke(
        'getAllSetting',
        ['Output', 'Video'],
      );
      console.log('data', data);
      debugger;
      const mapObs = (
        data: Map<string, any>,
        key: string,
        property: string,
      ): any => {
        if (data.get(key) === undefined) return null;
        const list = data.get(key)[property];
        if (property === 'values') {
          return list.map((item) => {
            const key = Object.keys(item)[0];
            return {
              label: key,
              value: item[key],
            };
          });
        }
        return data.get(key)[property];
      };
      const obsData: {
        Video: { Output: any; FPSCommon: any; Base: any };
        Output: {
          RecFilePath: any;
          Encoder: any;
          RecFormat: any;
          bitrate: any;
          Track1Bitrate: any;
        };
      } = {
        Output: {
          bitrate: mapObs(data, 'Output.bitrate', 'currentValue'),
          Track1Bitrate: mapObs(data, 'Output.Track1Bitrate', 'currentValue'),
          Encoder: mapObs(data, 'Output.Encoder', 'currentValue'),
          RecFilePath: mapObs(data, 'Output.RecFilePath', 'currentValue'),
          RecFormat: mapObs(data, 'Output.RecFormat', 'currentValue'),
        },
        Video: {
          Base: mapObs(data, 'Video.Base', 'currentValue'),
          Output: mapObs(data, 'Video.Output', 'currentValue'),
          FPSCommon: mapObs(data, 'Video.FPSCommon', 'currentValue'),
        },
      };
      setObsSetting(obsData);
      const obsDataOption = {
        Output: {
          bitrate: mapObs(data, 'Output.bitrate', 'values'),
          Track1Bitrate: mapObs(data, 'Output.Track1Bitrate', 'values'),
          Encoder: mapObs(data, 'Output.Encoder', 'values'),
          RecFilePath: mapObs(data, 'Output.RecFilePath', 'values'),
          RecFormat: mapObs(data, 'Output.RecFormat', 'values'),
        },
        Video: {
          Base: mapObs(data, 'Video.Base', 'values'),
          Output: mapObs(data, 'Video.Output', 'values'),
          FPSCommon: mapObs(data, 'Video.FPSCommon', 'values'),
        },
      };
      setObsOption(obsDataOption);
      console.log('obsOption', obsDataOption);
    }

    init();
  }, []);

  type MenuItem = Required<MenuProps>['items'][number];

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }

  const items: MenuItem[] = [
    getItem('输出', '1', <DesktopOutlined />),
    getItem('视频', '2', <ContainerOutlined />),
  ];

  const closeDynamicView = async () => {
    await window.tm?.ipcRenderer.invoke('closeObsModal');
  };
  return (
    <div className={styles.setting}>
      <div className={styles.content}>
        <div className={styles.left} style={{}}>
          <Menu
            style={{ width: '100%', height: '100%' }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            className={styles.menu}
            mode="inline"
            theme="dark"
            items={items}
            onClick={(e) => {
              setCheckMenuData(e.key);
            }}
          />
        </div>
        <div className={styles.right} style={{ width: '70%', height: '100%' }}>
          {checkMenuData === '1' && (
            <div
              style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
              }}
            >
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  视频码率
                </span>
                <InputNumber
                  style={{ width: '100%', marginRight: '10px' }}
                  step={50}
                  min={50}
                  max={100000}
                  value={obsSetting.Output.bitrate}
                  onChange={(value) => {
                    obsSetting.Output.bitrate = value;
                    setObsSetting({ ...obsSetting });
                    // window.tm?.ipcRenderer.invoke('setSetting', { category: 'Output', parameter: 'bitrate', value: value })
                  }}
                />
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  音频码率
                </span>
                {obsOption.Output.Track1Bitrate && (
                  <Select
                    style={{ width: '100%', marginRight: '10px' }}
                    options={obsOption.Output.Track1Bitrate}
                    defaultValue={obsSetting.Output.Track1Bitrate}
                    onChange={(value) => {
                      obsSetting.Output.Track1Bitrate = value;
                      setObsSetting({ ...obsSetting });
                    }}
                  />
                )}
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  视频编码器
                </span>
                <Select
                  style={{ width: '100%', marginRight: '10px' }}
                  options={obsOption.Output.Encoder}
                  value={obsSetting.Output.Encoder}
                  onChange={(value) => {
                    obsSetting.Output.Encoder = value;
                    setObsSetting({ ...obsSetting });
                  }}
                />
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  视频路径
                </span>
                <Space.Compact style={{ width: '100%', marginRight: '10px' }}>
                  <Input value={obsSetting.Output.RecFilePath} />
                  <Button
                    icon={<FolderAddOutlined />}
                    onClick={async () => {
                      const result =
                        await window.tm?.ipcRenderer.invoke('getDirection');
                      console.log('result', result);
                      obsSetting.Output.RecFilePath = result;
                      setObsSetting({ ...obsSetting });
                    }}
                  />
                </Space.Compact>
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  视频格式
                </span>
                <Select
                  style={{ width: '100%', marginRight: '10px' }}
                  value={obsSetting.Output.RecFormat}
                  options={obsOption.Output.RecFormat}
                  onChange={(value) => {
                    console.log('eee', value);
                    obsSetting.Output.RecFormat = value;
                    setObsSetting({ ...obsSetting });
                  }}
                />
              </div>
            </div>
          )}
          {checkMenuData == '2' && (
            <div
              style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
              }}
            >
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  基础（画布）分辨率
                </span>
                <Select
                  style={{ width: '100%', marginRight: '10px' }}
                  options={obsOption.Video.Base}
                  value={obsSetting.Video.Base}
                  onChange={(value) => {
                    console.log('eee', value);
                    obsSetting.Video.Base = value;
                    setObsSetting({ ...obsSetting });
                  }}
                />
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  输出（缩放）分辨率
                </span>
                <Select
                  style={{ width: '100%', marginRight: '10px' }}
                  options={obsOption.Video.Output}
                  value={obsSetting.Video.Output}
                  onChange={(value) => {
                    console.log('eee', value);
                    obsSetting.Video.Output = value;
                    setObsSetting({ ...obsSetting });
                  }}
                />
              </div>
              <div
                style={{
                  width: '100%',
                  height: '50px',
                  display: 'flex',
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: '300px',
                    textAlign: 'end',
                    paddingRight: '20px',
                  }}
                >
                  常用帧率
                </span>

                <Select
                  style={{ width: '100%', marginRight: '10px' }}
                  options={obsOption.Video.FPSCommon}
                  value={obsSetting.Video.FPSCommon}
                  onChange={(value) => {
                    console.log('eee', value);
                    obsSetting.Video.FPSCommon = value;
                    setObsSetting({ ...obsSetting });
                  }}
                />
              </div>
            </div>
          )}
        </div>
      </div>
      <div className={styles.footer}>
        <Button
          style={{ marginRight: '10px' }}
          onClick={async () => {
            console.log('应用', obsSetting);
            // debugger
            await window.tm?.ipcRenderer.invoke('setUserSetting', obsSetting);
            await closeDynamicView();
          }}
        >
          确认
        </Button>
        <Button
          style={{ marginRight: '10px' }}
          onClick={async () => {
            await closeDynamicView();
          }}
        >
          取消
        </Button>
      </div>
    </div>
  );
};

export default SceneModal;
